<script setup lang="ts">
import {ref} from "vue"
import type {CrudOperationsPropsType} from './types'
import type {CrudColumns} from '../XCrudColSetting';
import {SContact} from '@xtail/vue3';

defineOptions({
  name: 'XCrudOperations',
})

withDefaults(
  defineProps<CrudOperationsPropsType>(),
  {
    useAdd: true,
    add: () => {
    },
    addBtnProps: {} as any,
    useDel: true,
    del: () => {
    },
    delBtnProps: {} as any,
    useCascade: true,
    cascadeBtnProps: {} as any,
    useExpand: true,
    expand: () => {
    },
    retract: () => {
    },
    expandBtnProps: {} as any,
    useRefresh: true,
    refresh: () => {
    },
    refreshBtnProps: {} as any,
    useBuiltInSelectColumn: true,
    useColSetting: true,
    colSettingProps: {} as any,
  }
)

const cascade = defineModel<boolean>('cascade', {default: false})
const columns = defineModel<CrudColumns>('columns', {default: []})

const slots = useSlots()

const collapse = ref(false)
const contact = [
  () => collapse.value = true,
]
const restore = [
  () => collapse.value = false,
]
</script>

<template>
  <s-contact class="x-crud-operations" :contact="contact" :restore="restore">
    <slot name="prefix" :collapse="collapse"/>
    <slot name="add" :collapse="collapse">
      <x-crud-add-btn
        v-if="useAdd"
        v-bind="{
          click: add,
          collapse: collapse,
          ...addBtnProps
        }"
      >
        <template v-if="slots['add-btn-icon']" #btn-icon>
          <slot name="add-btn-icon"/>
        </template>
      </x-crud-add-btn>
    </slot>
    <slot name="add-suffix" :collapse="collapse"/>
    <slot name="batch-del" :collapse="collapse">
      <x-crud-del-confirm-btn></x-crud-del-confirm-btn>
    </slot>
    <slot name="batch-del-suffix" :collapse="collapse"/>
    <slot name="cascade" :collapse="collapse" :cascade="cascade">
      <x-cascade-btn
        v-if="useCascade"
        v-model:cascade="cascade"
        v-bind="{collapse: collapse, ...cascadeBtnProps}"
      >
        <template v-if="slots['cascade-btn-icon']" #btn-icon>
          <slot name="cascade-btn-icon"/>
        </template>
      </x-cascade-btn>
    </slot>
    <slot name="cascade-suffix" :collapse="collapse"/>
    <slot name="expand" :collapse="collapse">
      <x-expand-btn
        v-if="useExpand"
        v-bind="{
          expand: expand,
          retract: retract,
          collapse: collapse,
          ...expandBtnProps
        }"
      >
        <template v-if="slots['expand-btn-icon']" #btn-icon>
          <slot name="expand-btn-icon"/>
        </template>
      </x-expand-btn>
    </slot>
    <slot name="expend-suffix" :collapse="collapse"/>
    <slot name="refresh" :collapse="collapse">
      <x-refresh-btn
        v-if="useRefresh"
        v-bind="{
          click: refresh,
          collapse: collapse,
          ...refreshBtnProps
        }"
      >
        <template v-if="slots['refresh-btn-icon']" #btn-icon>
          <slot name="refresh-btn-icon"/>
        </template>
      </x-refresh-btn>
    </slot>
    <slot name="refresh-suffix" :collapse="collapse"/>
    <slot name="col-setting" :collapse="collapse">
      <x-crud-col-setting
        v-if="useColSetting"
        v-model:columns="columns"
        v-bind="{
          useBuiltInSelectColumn,
          triggerBtnCollapse: collapse,
          ...colSettingProps
        }"
      >
        <template v-for="(_, name) in slots" #[name]>
          <slot :name="name"/>
        </template>
      </x-crud-col-setting>
    </slot>
    <slot name="affix" :collapse="collapse"></slot>
  </s-contact>
</template>

<style lang="scss">
@use './style' as *;
</style>
